<template>
	<view>
		<u-popup :customStyle="customStyles" round="15" :show="show" mode="center">
			<view class="pad-30">
				<view class="text-center font-40">{{title}}</view>
				<view class="text-center pad-30 content font-28">{{content}}</view>

				<view class="betweenX gap60 font-30">
					<view @click="hanldeCancel"
						class="flex-w color-theme radius12 pad-top-bottom-15 button-style text-center">{{cancelText}}
					</view>
					<view @click="hanldeConfirm"
						class="flex-w bg-theme color-white radius12 pad-top-bottom-15 button-style text-center">
						{{confirmText}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '提示'
			},
			content: {
				type: String,
				default: '一段内容'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确认'
			}
		},
		data() {
			return {
				customStyles: {
					width: '650rpx',
					height: '400rpx'
				}
			}
		},
		methods: {
			// 改变状态
			hanldeCancel() {
				this.$emit('cancel')
			},
			hanldeConfirm() {
				this.$emit('confirm')
			}
		}
	}
</script>


<style scoped lang="scss">
	.content {
		height: 200rpx
	}


	.button-style {
		border: 2rpx solid $uni-theme;
	}
</style>